<template>
    <div class="container">
        <!-- 顶部 -->
        <van-nav-bar
            title="登录"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <!-- 头像 -->
        <div class="avatar-area">
            <div class="pic">
                <img src="../assets/login.png" alt="">
            </div>
        </div>
        <!-- 表单 -->
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
            <!-- 通过 pattern 进行正则校验 -->
            <!-- 账号 -->
            <van-field
                v-model="loginFrom.telephone"
                name="telephone"
                placeholder="登录名/手机号"
                :rules="[
                    { required: true,message: '请输入账号'},
                ]"
            >
                <template #button>
                    <img src="../assets/name.png" alt="">
                </template>
            </van-field>
            <!-- 账号 -->
            <van-field
                v-model="loginFrom.salesLoginPassword"
                name="salesLoginPassword"
                placeholder="请输入登录密码"
                type="password"
                :rules="[
                    { required: true,message: '请输入密码'},
                ]"
            >
                <template #button>
                    <img src="../assets/word.png" alt="">
                </template>
            </van-field>
            <!-- 注册 -->
            <div class="resigion">
                <div class="resigion-left" @click="toResigion">注册</div>
                <!-- <div class="resigion-right">忘记密码？</div> -->
            </div>
            <!-- 登录 -->
            <div class="login-btn">
                <van-button class="btn" round block type="info" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import{infoLogin,getuserInfo}from"@/api/login"
import {mapActions,mapState} from "vuex"
export default {
    data(){
        return{
            loginFrom:{
                telephone:"",
                salesLoginPassword:""
            }
        }
    },
    methods:{
        ...mapActions(["SaveUserInfo","SaveUsertoken"]),
        // 获取用户信息
        loadData(){
            const{SaveUserInfo}=this
            getuserInfo().then(res=>{
                console.log(res)
                if(res.salesManNickName){
                    SaveUserInfo(res)
                    this.$router.push({path:"/user"})
                }
            })
        },
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1);
        },
        // 登录
        onSubmit(value){
            console.log(value)
             if(value){
                 infoLogin(this.loginFrom).then(res=>{
                    console.log(res)
                    if(res){
                        this.SaveUsertoken(res)
                        this.$toast.success("登录成功");
                        // 获取用户信息
                        this.loadData()
                    }
                })
             }
        },
        onFailed(errorInfo,values) {
            console.log(values)
            console.log('failed', errorInfo);
        },
        // 去注册
        toResigion(){
            this.$router.push({path:"/resigion"})
        }
    }
}
</script>
<style lang="less" scoped>
// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
// 头像
.avatar-area{
    .pic{
        padding-top: 0.5rem;
        width: 1.84rem;
        height: 1.56rem;
        margin: 0 auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
// 输入
.van-form{
    padding: 0 0.3rem;
    margin-top: 0.72rem;
}
.van-cell{
    margin-bottom: 0.2rem;
}
/deep/.van-field__control{
    height: 0.8rem;
    border: 1px solid #C3C3C3;
    border-radius: 0.39rem;
    padding-left: 0.9rem;
}
/deep/.van-field__body{
    position: relative;
    .van-field__button{
        position: absolute;
        left: 0.25rem;
        top: 50%;
        transform: translate(0,-50%);
        img{
            width: 0.34rem;
            height: 0.34rem;
            vertical-align:sub;
        }
    }
}
// 注册
.resigion{
    padding: 0 0.9rem;
    font-size: 0.28rem;
    justify-content: space-between;
    display: flex;
    .resigion-left{
        color: #969696;
    }
    .resigion-right{
        color: #F09816;
    }
}
// 登录
.login-btn{
    padding: 0 0.9rem;
    margin-top: 0.75rem;
    .btn{
        font-size: 0.3rem;
        background-color: #FF9800;
        height: 0.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.2rem;
        color: #fff;
    }
}
.van-button--info{
    border: 1px solid #fff;
}
</style>